{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.css"/>
<link rel="stylesheet" href="__STATIC__/mobile/default/css/goods.css"/>
<style type="text/css">
	.swiper-slide video{ width: 100%; height: 4.5rem;object-fit: cover; }
	.swiper-slide .video{ width: 100%; height: 4.5rem;}
	.swiper-slide .btn{ width: 50px; height: 50px; background: transparent url("__STATIC__/images/play-btn.png") no-repeat; background-size:  auto 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: none;}
	.swiper-slide .btn.pause{ background-image: url("__STATIC__/images/pause-btn.png");}
	.Goods .imgText .title{ padding-left: 0;}
	.Goods .imgText .title ul{ display: flex; width: 100%;  }
	.Goods .imgText .title ul li{ text-align: center; width: 50%; font-size: 0.2rem; }
	.Goods .imgText .title ul li:first-child{border-right: 1px solid #f5f5f5;}
	.Goods .header-title{     margin: 0 1.6rem 0 1rem; }
	.Goods .cell >.fs32 { font-size: 0.2rem !important;}
	</style>
{/block}
{block name='pageType'}Goods{/block}
{block name="main" }
<div class="page-hd">
          <div class="header">
              <div class="header-left back">
                  <a href="javascript:history.go(-1)" class="left-arrow"></a>
              </div>
              <div class="header-title">
                <span class="fs32 color_9 active">商品</span>
                <!--<span class="fs32 color_9">评价</span>-->
                <span class="fs32 color_9">详情</span>  
              </div>
          </div>
      </div>

<div class="page-bd tabBox" id="goods">
    <!-- 页面内容-->
    <!-- 商品轮播 -->
	<div class="swiperBox">            
        <div class="swiper-container swiper1" id="swiper01">              
            <div class="swiper-wrapper">              
                {volist name="imgsList" id="img" key='k' }                          
                {if $k==1 && $goodvideo[0] !=''}
                <li class="swiper-slide">
                	 <video class="video"   id="video" x5-playsinline="true"  playsinline="true" webkit-playsinline="true" preload="auto" poster="{$img}" loop>
					        <source src="{$goodvideo[0]}" >
					    </video>
					    <button type="button" class="btn js-play-btn"></button>
                </li>
                {/if}
                <li class="swiper-slide"><img src="{$img}" alt=""/></li>                
                {/volist}
            </div>                 
            <div class="swiper-pagination pagination1"></div>                   

        </div>                          
    </div>
    <!-- 商品信息 -->
    <div class="moneyBox">
        <div class="top">
            <div class="color_3 fs30 num money"><p class="fw_b fm_p">￥</p>
                {eq name="goods.is_spec" value="0"}
                <em class="fs52">{$goods.exp_price[0]}</em>
                <p>.{$goods.exp_price[1]}</p>
                {else/}
                    {if condition="$goods.min_price == $goods.max_price"}
                        <em class="fs52">{$goods.exp_min_price[0]}</em>
                        <p>.{$goods.exp_min_price[1]}</p>
                    {else/}
                        <em class="fs52">{$goods.exp_min_price[0]}</em>
                        <p>.{$goods.exp_min_price[1]}</p>
                        <em class="fs52">~</em>
                        <em class="fs52">{$goods.exp_max_price[0]}</em>
                        <p>.{$goods.exp_max_price[1]}</p>
                    {/if}
                {/eq}

            </div>
           <span class="fs22 color_w BGcolor_r {$goods['is_promote']==0?'hide':''}">活动价</span>
           <div class="button">
		    	<a href="{:url('myCode',['goods_id'=>$goods['goods_id']])}" class="share"><img src="__STATIC__/mobile/default/images/goodsIcon01.png" alt=""></a>
		    	<div class="attention"><img src="__STATIC__/mobile/default/images/goodsIcon03{$isCollect==1?'_lh':''}.png" data-no="{$isCollect}" alt=""></div>
		    </div>
        </div>
        {gt name="goods.use_integral" value="0"}
        <div class="color_3 fs20 num money"><p class="fw_b fm_p"> + 星券：</p><em class="fs32 color_r">{$goods.use_integral}</em>分（组合购买，须额外支付星券）</div>
        {/gt}
        {gt name="goods.market_price" value="0"}
        <div class="original fs24 color_9">￥{$goods.market_price}</div>
        {/gt}
        <div class="name fw_b color_3" style="margin-bottom: 10px;">{$goods.goods_name}</div>
        {volist name="priceList" id="prices" }
            {volist name="prices" id="price" }
            <div class="color_3 fs20 num money"><p class="fw_b fm_p">{$price.name}：￥</p><em class="fs22">{$price.price}</em></div>
            {/volist}
        {/volist}
        <div class="tips fs28 color_9  "><span>热销</span><p>库存{$goods.goods_number}</p>
          {if $goods.restrictions != 0}
          <p class=" fs24 color_9">限购{$goods.restrictions}</p>
          {/if}
            <p  class="hide">运费10元</p></div>
    </div>
    {eq name="goods.is_spec" value='1'}
    <div class="cell">
        <span class="fs32 fw_b color_3">选择规格</span>
        <div class="size"><p class="fs28 color_6 selSkuName">请选择规格</p><img
                src="__STATIC__/mobile/default/images/rightIcon.png" alt="" class="threeRight"></div>
    </div>
    {/eq}
    <div class="pic-info">
    	<p class="fs28"><b>服务</b> &nbsp;&nbsp;&nbsp;优品保障&nbsp; <span>.</span>&nbsp;&nbsp;极速发货&nbsp;<span>.</span>&nbsp;&nbsp;售后无忧</p>
    </div>
    
    
    
    
    <!-- 店铺 -->
    <div class="shopName bor_b" style="display: none">
        <div><img src="__STATIC__/mobile/default/images/shoplogo.png" alt=""><span class="fs32 fw_b color_3">xxxx</span>
        </div>
        <img src="__STATIC__/mobile/default/images/rightIcon.png" alt="" class="threeRight">
    </div>
   <!-- 评论 -->
        <!--<div class="comment ">
           <a class="top" href="{:url('comment',['goods_id'=>$goods['goods_id']])}">
              <div class="fs32 color_3"><span class="fw_b">用户评价</span><p class="color_9 commentNum">(0)</p></div>
              <div><span class="fs26 color_9">更多</span><img src="__STATIC__/mobile/default/images/rightIcon.png" alt="" class="threeRight"></div>
           </a>
           <div class="commentBox">
              <div class="user">
                <img src="" alt="">
                <div class="info">
                  <p class="fs28 color_3 uname"></p>
                  <span class="fs24 color_9 time"></span>
                </div>
              </div>
              <div class="comtext fs28 color_3 line_twe content">
                  
              </div>
              <div class="comimg">
              </div>              
           </div>
        </div>-->
        <!-- 图文 -->
        <div class="imgText">
          	<div class="title fw_b fs32 color_3">
	          	<ul>
	      			<li>商品详情</li>
	      			<li><a class="top" href="{:url('comment',['goods_id'=>$goods['goods_id']])}">用户评价<span class="color_9 commentNum">(0)</span></a></li>
	          	</ul>
          	</div>
          	<div class="img-one">
          	{$goods.m_goods_desc|raw}
          	</div>
        </div>
    <!-- 浮按钮 -->
    
</div>

<!-- 弹出规格选择 -->
{include file="goods/sku" /}

<!-- 底部 -->
<div class="page-ft">
    <div class="left">
        <a href="/"><img src="__STATIC__/mobile/default/images/bottom_icon01.png" alt=""><span
                class="fs22 color_6">首页</span></a>
        <!--<div v5_href><img src="__STATIC__/mobile/default/images/goodsIcon02.png" alt=""><span class="fs22 color_6" >客服</span>-->
        <!--</div>-->
        <a href="{:url('flow/cart')}"><em class="BGcolor_r fs22 color_w cartNum">{$cartInfo.num|intval}</em><img
                src="__STATIC__/mobile/default/images/bottom_icon04.png" alt=""><span
                class="fs22 color_6">购物车</span></a>
    </div>
    <div class="right">
        <!-- <div class="fs28 color_w fw_b BGcolor_3 buyBtn" data-type="show">加入购物车</div> -->
        <div class="fs28 color_w fw_b BGcolor_r buyBtn" data-type="show">立即购买</div>
    </div>
</div>
{/block}
{block name="footer"}
<script src="__STATIC__/mobile/default/js/Swiper-4.0.7/swiper.min.js"></script>
<script type="text/javascript">
	// 视频------视频截图 ~~ 视频播放状态 ~~
    const setMedia = function(video, scale = 0.8) {
        // 设置poster属性：（非本地视频资源会有跨域截图问题）
        // video.addEventListener('loadeddata', function(e) {
        //     // 拿到图片
        //     var canvas = document.createElement('canvas');
        //     canvas.width = video.videoWidth * scale;
        //     canvas.height = video.videoHeight * scale;
        //     canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        //     var src = canvas.toDataURL('image/png');
        //     // 显示在dom，测试用
        //     (function(flag = true) {
        //         if (!flag) {return;}
        //         var img = document.createElement('img');
        //         img.src = src;
        //         document.body.appendChild(img);
        //     })(0);
        //     // 设置属性
        //     video.setAttribute('poster', src);
        // });
// -------------------------------------------------------------------------------------
        //检测视频播放状态：
        //播放按钮
        var playBtn =  video.parentNode.childNodes[2].nextSibling;
        //设置状态
        function vidplaySate(e) {
            if (video.paused) {
                video.play();
                playBtn.classList.add('pause');
            } else {
                video.pause();
                playBtn.classList.remove('pause');
            }
        }
        //点击监听
        video.addEventListener('click', vidplaySate, false);
        playBtn.addEventListener('click', vidplaySate, false);
        //结束监听
        video.addEventListener('ended',function () {
            playBtn.classList.remove('pause');
        });
    };
    //视频：
    var videos = document.querySelectorAll('video');
    videos.forEach(function(video)  {
        setMedia(video);
    });
	
</script>
<script>
$(function () {

	swiper1 = createSwiper(1);
	// 关注
	$('.attention').on('click', function () {
		let imgObj = $(this).find('img');
		var status = imgObj.data('no');
		jq_ajax('{:url("shop/api.goods/collect")}', 'goods_id={$goods.goods_id}', function (res) {
			if (res.code == 0) {
				_alert(res.msg);
				return false;
			}
			if (status == 0) {
				imgObj.attr('src', '__STATIC__/mobile/default/images/goodsIcon03_lh.png')
				imgObj.data('no', '1')
			} else {
				imgObj.attr('src', '__STATIC__/mobile/default/images/goodsIcon03.png')
				imgObj.data('no', '0')
			}
		});
		
	})
	jq_ajax('{:url("shop/api.comment/getListByGoods",["goods_id"=>$goods["goods_id"],"limit"=>1])}','',function(res){
		if (res.code == 0){
			return false;	
		}
		if (res.data.total_count > 0){
		    $('.commentBox').removeClass('hide');
        }
		$('.commentNum').html('('+res.data.total_count+')');
		if (res.data.total_count > 0){
			$('.commentBox .user img').attr('src',res.data.list[0].headimgurl?res.data.list[0].headimgurl:'__STATIC__/mobile/default/images/defheadimg.jpg');
			$('.commentBox .user .uname').html(res.data.list[0].user_name);
			$('.commentBox .user .time').html(res.data.list[0]._time);
			$('.commentBox  .content').html(res.data.list[0].content);
			$.each(res.data.list[0].imgs,function(i,v){
				$('.commentBox .comimg').append('<img src="'+v.thumbnail+'">');
			})
		}
	})

	// 滚动出现tab
	$('#goods').scroll(function(){
	  var scrolltop=$(this).scrollTop()
	  // console.log($('.comment').offset().top,scrolltop)
	  if(scrolltop>100){
		$('.header-title').css('display','flex');
		$('.header-left').removeClass('back')
		$('.page-hd').css('background-color','#fff')
		$('.header').addClass('bgShow')
		if($('.comment').offset().top<$('.page-hd').height()){
		  $('.header-title span').eq(1).addClass('active')
		  $('.header-title span').eq(1).siblings().removeClass('active')
		  if($('.imgText').offset().top<$('.page-hd').height()){
			$('.header-title span').eq(2).addClass('active')
			$('.header-title span').eq(2).siblings().removeClass('active')
		  }else{
			$('.header-title span').eq(1).addClass('active')
			$('.header-title span').eq(1).siblings().removeClass('active')
		  }
		}else{
		  $('.header-title span').eq(0).addClass('active')
		  $('.header-title span').eq(0).siblings().removeClass('active')
		}

	  }else{
		$('.header-title').css('display','none');
		$('.header-left').addClass('back')
		$('.page-hd').css('background-color','transparent')
		$('.header').removeClass('bgShow')
	  }

	})
	  //tab切换
	$('.header-title span').on('click',function(){
	  var index=$(this).index()
	  var topHeight=$('.page-hd').height()
	  var commentTop= $('.comment').offset().top+$('#goods').scrollTop()-topHeight+1
	  var imgTextTop= $('.imgText').offset().top+$('#goods').scrollTop()-topHeight+1
		if(index==0){
		  $("#goods").animate({scrollTop:0}, 300)
		}else if(index==1){
		  $("#goods").animate({scrollTop:commentTop+'px'}, 300)
		}else{
		  $("#goods").animate({scrollTop:imgTextTop+'px'}, 300)
		}
	})
	//点击购买按钮
	$('.buyBtn ').on('click', function () {
		var obj = $(this);
		if (obj.data('type') == 'show') {
			$('.model').show();
			selsku();
		} else {
			addToCart(obj);
		}
	})

	
	var isbuy = $utils.query('buy')

	if(isbuy) {
		$('.buyBtn').trigger('click')
	}
	
})
//获取购物车
jq_ajax("{:url('shop/api.flow/getCartInfo')}", '',function (res) {
	if (res.code == 0)  return false;
	$('.cartNum').html(res.cartInfo.num);
});
//添加到购物车
function addToCart(obj) {
	var arr = new Object;
	arr.goods_id = obj.data('goods_id');
	arr.specifications = obj.data('sku');
    if (typeof(arr.specifications) != 'undefined'){
        arr.sku_id = sub_goods[arr.specifications].sku_id;
    }
	arr.type = obj.data('type');
	arr.number = $('#buynumber').val();
	var res = jq_ajax("{:url('shop/api.flow/addCart')}", arr);
	if (res.code == 1) {
		if (arr.type == 'onbuy') {
			window.location = '{:_url("flow/checkout",array("rec_id"=>"【res.rec_id】"))}';
			return false;
		}
		$('.cartNum').html(res.cartInfo.num);
	}
	if (res.msg) _alert(res.msg,res.url);
}

function createSwiper(index) {
	var swiper = new Swiper(".swiper" + index, {
		pagination: {
			el: ".pagination" + index
		},
		paginationClickable: true,
		observer: true,
		observeParents: true,
		loop: true,
		autoplay: {
			delay: 15000,
			stopOnLastSlide: false,
			disableOnInteraction: false
		},
		onSlideChangeEnd: function (swiper) {
			swiper.update(); //swiper更新
		}
	});
	return swiper;
}
</script>
{/block}